/*
 * @Author: zhangyang
 * @Date: 2022-03-08 17:17:53
 * @LastEditTime: 2022-08-13 16:57:47
 * @Description: 数据展示组件
 */
import { NCard, NNumberAnimation } from 'naive-ui';
import type { PropType, RenderFunction } from 'vue';

export type DisplayItem = {
  title: string;
  tag: RenderFunction;
  unit?: string;
  num: number;
  icon: RenderFunction;
  sub_title: string;
  total_num: number;
};

export default defineComponent({
  props: {
    data: { type: Object as PropType<DisplayItem[]>, required: true }
  },
  setup(props) {
    const generateDefault = (item: DisplayItem) => {
      return (
      <div class="flex justify-between text-2xl">
        { item?.unit ?? null }
        <NNumberAnimation
          show-separator
          to={item.num}
        />
        { item.icon() }
      </div>
      );
    };
    const generateFooter = (item: DisplayItem) => {
      return (
      <div class="flex justify-between">
        <span>{item.sub_title}</span>
        <span>
          { item?.unit ?? null }
          <NNumberAnimation
            show-separator
            to={item.total_num}
          />
        </span>
      </div>
      );
    };
    const generateCard = (arr: DisplayItem[]) => {
      return arr.map((item, index) => 
        <NCard
          title={item.title}
          segmented={{ content: true }}
          key={index + 'fsdjcewury'}
        >
          {{
            'header-extra': () => item.tag(),
            'default': () => generateDefault(item),
            'footer': () => generateFooter(item)
          }}
        </NCard>
      );
    };
    return () => (
      <div class="flex children:m-2">
        { generateCard(props.data) }
      </div>
    );
  }
})